<template>
	<view class="followList" >
		<scroll-view scroll-y="true" style="height: 100%;" @scroll="scroll">
			<view class="item" v-for="(item,itemId) in list" :key="item.id">
				<view class="top">
					<view class="img-box">
						<image class="img" src="http://localhost:8099/img/3.jpg" mode=""></image>
					</view>
					<view class="author-name">
						{{item.author}}
					</view>
					<view class="share">
						...
					</view>
				</view>
				<view class="title">
					{{item.title}}
				</view>
				<view class="video-box">
					<follow-player :list="list" ref="player" :itemId="itemId" :item="item"></follow-player>
					<view class="music-box">
						<view class="music">
							君不见黄河之水天上来！
						</view>
					</view>
				</view>
				<view class="box">
					<view class="left">
						2021-07-7
					</view>
					<view class="right">
						<view class="iconfont icon-xin icon">
							<text class="text">赞{{item.loveNumber}}</text>
						</view>
						<view class="iconfont icon-pinglun icon">
							<text class="text">评论{{item.commentNumber}}</text>
						</view>
						<view class="iconfont icon-fenxiang icon">
							<text class="text">分享{{item.shareNumber}}</text>
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="number">
						4.2w评论过
					</view>
					<view class=" comment-box">
						<view class="iconfont icon-icon-checkin icon-pen">
							
						</view>
						<input type="text" class="input-box" placeholder="添加评论..." />
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	let timer= null;
	import followPlayer from "./followPlayer.vue";
	export default {
		components:{
			followPlayer
		},
		props:['list'],
		name:"followList",
		data() {
			return {
				index:0
			};
		},
		methods:{
			
			scroll(res){
				clearTimeout(timer);
				timer=setTimeout(()=>{
					// console.log(1);
					let index = Math.floor((res.detail.scrollTop+150)/550)
					this.index=index;
				},100)
			}
		},
		watch:{
			index(){
				console.log(1);
				// 注意此处的ref没有动态绑定
				if(this.index>=0&&this.index<=this.list.length){
					this.$refs.player[this.index].play();
				}
				// 下滑执行
				if((this.index-1)<0){
					
				}else{
					this.$refs.player[this.index-1].pause();
				}
				// 上滑执行
				if((this.index+1)>=this.list.length){
					// console.log(index+'错误被执行了');
				}else{
					this.$refs.player[this.index+1].pause();
				}
			}
		}
	}
</script>

<style>
.followList{
	margin-top: 10px;
	width: 100%;
	background-color: #000000;
	padding-bottom:50px;
	height: 100%;
}
.item{
	padding:0 15px;
	height: 550px;
}
.top{
	height:35px;
}
.img-box{
	float: left;
}
.img{
	width: 35px;
	height:35px;
	border-radius: 50%;
}
.author-name{
	height: 35px;
	line-height: 35px;
	float: left;
	color: #fff;
	font-size: 14px;
	padding-left: 10px;
}
.share{
	height: 35px;
	line-height: 35px;
	float: right;
	color: #fff;
	font-size: 28px;
	margin-right: 5px;
}
.title{
	width:100%;
	font-size: 13px;
	margin-top:15px;
	height: 25px;
	line-height: 25px;
	color: #fff;
}
.video-box{
	width: 100%;
	height: 350px;
	position: relative;
}

.box{
	height: 25px;
	margin-top: 25px;
}
.left{
	float:left;
	font-size: 11px;
	height: 25px;
	line-height: 25px;
	color: #aaa;
}
.right{
	float: right;
	height: 25px;
}
.icon{
	float: right;
	margin-right: 20px;
	color: #fff;
	font-size: 18px;
}
.text{
	padding:0 5px;
	font-size: 12px;
}
.comment{
	width: 100%;
	
}
.number{
	width: 100%;
	height: 25px;
	font-size: 15px;
	line-height: 15px;
	color: #aaa;
	margin:10px 0;
}
.comment-box{
	position: relative;
}
.icon-pen{
	position: absolute;
	height: 30px;
	color: #fff;
	top: 0;
	left: 0;
}
.input-box{
	margin-left: 28px;
	font-size:15px ;
	color: #fff;
}

.music-box{
	position:absolute;
	z-index: 20;
	bottom:30px;
	left: 10px;
	width: 100px;
	overflow: hidden;
}
.music{
	font-size: 14px;
	color:#fff;
	width: 200px;
	animation: music 4s linear 0.2s infinite;
}
@keyframes music{
	0%{
		transform: translate3d(80%,0,0);
	}
	100%{
		transform: translate3d(-80%,0,0);
	}
}
</style>
